<template>
  <div>
    <tiny-form style="padding: 10px" :model="editData">
      <tiny-row>
        <tiny-col :span="4">
          <tiny-form-item label="规则名称">
            <tiny-input v-model="editData.ruleName" placeholder="规则名称"></tiny-input>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="4">
          <tiny-form-item label="网站地址">
            <tiny-input v-model="editData.rootSource" placeholder="网站地址"></tiny-input>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="4">
          <tiny-form-item label="传参类型">
            <vo-select default dictCode="rootType" width="100%" v-model:value="editData.rootType" placeholder="POST/GET" displayValue="itemCode" displayName="itemName"></vo-select>
          </tiny-form-item>
        </tiny-col>
      </tiny-row>
      <tiny-row>
        <tiny-col :span="4">
          <tiny-form-item label="规则类型">
            <vo-select default dictCode="ruleType" width="100%" v-model:value="editData.ruleType" placeholder="规则类型" displayValue="itemCode" displayName="itemName"></vo-select>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="8">
          <tiny-form-item label="搜索地址">
            <tiny-input v-model="editData.rootSearch" placeholder="搜索地址"></tiny-input>
          </tiny-form-item>
        </tiny-col>
      </tiny-row>
    </tiny-form>
    <div class="ruleSetEdit">
      <div>
        <tiny-button-group>
          <tiny-button type="info" @click="handleZip">合并</tiny-button>
          <tiny-button type="info" @click="handleFormat">展开</tiny-button>
          <tiny-button type="success" @click="bookCheck">规则校验</tiny-button>
          <tiny-button type="warning" @click="ruleMarkDilag">规则说明</tiny-button>
         <tiny-button  type="danger" @click="initBookRule">初始化规则</tiny-button>
        </tiny-button-group>
      </div>
      <tiny-row>
        <tiny-col span="12">
          <yu-ace-editor :data="data.editorStr" lang="json" v-model:value="data.editorStr" @handleCells="handleCells" @handleFormat="handleFormat"></yu-ace-editor>
        </tiny-col>
        <tiny-col span="12">
          <div class="button-class">
            <tiny-button-group>

              <tiny-button type="primary" @click="saveBookRuleData">保存</tiny-button>
            </tiny-button-group>
          </div>
        </tiny-col>
      </tiny-row>
    </div>
  </div>
      <vo-dialog v-model:isShow="data.ruleCheck.isShow" :data="data.ruleCheck.dialogConfig" >
          <rule-check :ruleCheck="data.ruleCheck" v-model:isShow="data.ruleCheck.isShow"></rule-check>
    </vo-dialog>
      <vo-dialog v-model:isShow="data.ruleMark.isShow" :data="data.ruleMark.dialogConfig" >
        <rule-remark :ruleMark="data.ruleMark" v-model:isShow="data.ruleMark.isShow"></rule-remark>
    </vo-dialog>
</template>
<script setup>
  import RuleCheck from './RuleCheck.vue';
  import RuleRemark from './RuleRemark.vue';
  import {Modal, Notify} from '@opentiny/vue';

  import {ref, getCurrentInstance, reactive, toRef, onMounted} from 'vue';
  const {proxy} = getCurrentInstance();

  const emits = defineEmits(['update:isShow']);
  const props = defineProps({
    isShow: {type: Boolean, default: false},
    editData: {type: Object, default: {}},
  });
  const data = reactive({
    ruleCheck: {isShow: false,dialogConfig: {width: '60%', title: '',modal:"false"}},
    ruleMark: {isShow: false,dialogConfig: {width: '60%', title: '',modal:"false"}},
    editorStr: '{}',
  });
  onMounted(() => {
    debugger;
    if (props.editData.ruleId) {
      data.editorStr = JSON.stringify(JSON.parse(props.editData.ruleSet), null, 2);
    } else {
      //新增默认初始化
      initBookRule();
    }
  });

  const handleZip = () => {
    data.editorStr = JSON.stringify(JSON.parse(data.editorStr), null, 0);
  };
  const handleFormat = () => {
    data.editorStr = JSON.stringify(JSON.parse(data.editorStr), null, 2);
  };
  const initBookRule = async () => {
    let rs = await proxy.$api.rule.initSysRule({modelCode: props.editData.ruleType});
    data.editorStr = JSON.stringify(JSON.parse(rs.ruleSet), null, 2);
  };
  const bookCheck =  () => {
    data.ruleCheck.isShow = true;
  };
  const ruleMarkDilag =  () => {
    data.ruleMark.isShow = true;
  };
  const saveBookRuleData = async () => {
    let ruleSet = JSON.stringify(JSON.parse(data.editorStr), null, 0);
    props.editData.ruleSet = ruleSet;
    proxy.$api.rule.editSysRule(props.editData).then(res => {
      if (res.code != -1) {
        Modal.message({status: 'success', message: res.msg});
        emits('update:isShow', false);
      } else {
        // 关闭对话框
        Modal.message({status: 'error', message: res.msg});
      }
    });
  };
</script>
<style lang="scss" scoped>
  .button-class {
    padding-top: 10px;
    text-align: right;
  }
</style>
